<template>
    <div class="user">
        <!--左侧导航区-->
        <div class="menu">
            <div class="top">
                <el-icon><House/></el-icon>
                <span> / 会员中心</span>
            </div>
            <el-menu
                :default-active="$route.path"
                class="el-menu-vertical-demo"
            >
                <el-menu-item index="/user/approve" @click="goRouter('/user/approve')">
                    <el-icon>
                        <UserFilled/>
                    </el-icon>
                    <span>实名认证</span>
                </el-menu-item>
                <el-menu-item index="/user/order" @click="goRouter('/user/order')">
                    <el-icon>
                        <View/>
                    </el-icon>
                    <span>挂号订单</span>
                </el-menu-item>
                <el-menu-item index="/user/patient" @click="goRouter('/user/patient')">
                    <el-icon>
                        <Setting/>
                    </el-icon>
                    <span>就诊人管理</span>
                </el-menu-item>
                <el-menu-item index="/user/profile" @click="goRouter('/user/profile')">
                    <el-icon>
                        <Switch/>
                    </el-icon>
                    <span>修改账号信息</span>
                </el-menu-item>
                <el-menu-item index="/user/feedback" @click="goRouter('/user/feedback')">
                    <el-icon>
                        <ChatLineRound/>
                    </el-icon>
                    <span>意见反馈</span>
                </el-menu-item>
            </el-menu>
        </div>
        <!--右侧二级路由展示区-->
        <div class="content">
            <RouterView></RouterView>
        </div>
    </div>
</template>

<script setup lang="ts" name="user">
    import {ChatLineRound, UserFilled, View, Setting, Switch, House} from '@element-plus/icons-vue';
    import {RouterView,useRouter,useRoute} from "vue-router";

    let $router = useRouter();
    let $route = useRoute();
    const goRouter = (path: string) => {
        $router.push({path: path});
    }
</script>

<style scoped>
.user {
    margin: 20px;
    display: flex;
    .menu {
        flex: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .content {
        flex: 8;
    }
}
</style>